<template>
  <div>
    <MsgList
      :barData="barData"
      :msgData="data"
      @msgClick="onMsgClick"
      @msgRemove="onMsgRemove"
      @barClick="onBarClick"
    ></MsgList>
  </div>
</template>

<script setup name="Msg">
import { reactive } from "vue";
import { showDialog, showConfirmDialog } from "vant";
import MsgList from "@/components/MsgList/index.vue";
import { showToast } from "vant";

const barData = reactive([
  {
    title: "今天是中秋节，点击领取礼品！",
    icon: "birthday-cake-o",
  },
  {
    title: "定位已开启",
    icon: "guide-o",
  },
]);

const data = reactive([
  {
    userId: "9b54c39939c3776bd706ad315452cde8",
    avatar: "./msg/avatar1.jpeg",
    nickName: "Tonny",
    newestMsg: "最近过得还好吗？",
    unReadCount: 2,
  },
  {
    userId: "795d2d2f7711170a99958f8c8d195414",
    avatar: "./msg/avatar2.jpeg",
    nickName: "Rico",
    newestMsg: "中秋国庆放八天！",
    unReadCount: 0,
  },
  {
    userId: "c4dec0b791ad3df3d4e1bace20dc9c69",
    avatar: "./msg/avatar3.jpeg",
    nickName: "Christine",
    newestMsg: "Hello~",
    dot: true,
  },
]);

function onMsgClick(item) {
  showToast("rico你点击了消息！" + `${item.nickName}被点击！`);
  // showDialog({ message: "clicked" });
}
function onMsgRemove(item) {
  showDialog({ message: `${item.nickName}被移除！` });
}
function onBarClick(item) {
  showConfirmDialog({ message: `${item.title}被点击！` });
}
</script>

<style>
</style>